<script setup>
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { computed, onMounted, ref, shallowRef } from 'vue';
  const map = shallowRef(null);
  const container = ref('')
  let AMap = null
  // 初始化经纬度,目前用的贵阳一个随机点
  const props = defineProps({
    mapInit: { type: Function, default: () => { } },
    lnglat: { type: String, default: '' }
  })
  const point = computed(() => props.lnglat ? props.lnglat.split(',') : null)
  // 初始化
  const initMap = () => {
    AMapLoader.load({
      key: window.config.amapKey,             // 申请好的Web端开发者Key，首次调用 load 时必填
      // version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.Autocomplete'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((newAmap) => {
      AMap = newAmap
      map.value = new AMap.Map(container.value, {  //设置地图容器id
        viewMode: "3D",    //是否为3D地图模式
        zoom: 16,           //初始化地图级别
        expandZoomRange: true,
        resizeEnable: true,
        center: point.value, //初始化地图中心点位置
        showLabel: false,
        WebGLParams: {
          preserveDrawingBuffer: true
        },
        layers: [
          // 卫星
          // new AMap.TileLayer.Satellite(),
          // 路网
          // new AMap.TileLayer.RoadNet(),
        ],
        zooms: [0, 18]
      });
      new AMap.TileLayer({
        // 图块取图地址
        tileUrl: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d3a993b0ad4f8b1c91e73e49b6d790f0',
        zIndex: 2,
        map: map.value,
        opacity: 1,
      });
      new AMap.TileLayer({
        // 图块取图地址
        tileUrl: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d3a993b0ad4f8b1c91e73e49b6d790f0',
        zIndex: 3,
        map: map.value,
        opacity: 1,
      });

      props.mapInit(AMap, map.value, point.value)
    }).catch(e => {
      console.log(e);
    })
  }
  onMounted(() => {
    initMap()
  })
</script>

<template>
  <div class="com-full" ref="container"></div>
</template>